import React, { memo } from "react";
import { Threemesswrap } from "./style";
import { useHistory } from "react-router-dom";
import Mainrighttitle from "@/components/mainrighttitle";
export default memo(function Threemess(props) {
  const { blog } = props;
  const history = useHistory();
  const blog1 = blog.length > 0 && [...blog];
  return (
    <Threemesswrap>
      <div className="first">
        <Mainrighttitle title="精彩文章推荐"></Mainrighttitle>
        <ul>
          {blog.length > 0 &&
            blog.slice(0, 6).map((item, index) => {
              return (
                <li
                  className="item"
                  key={item.bgid}
                  onClick={(e) => {
                    history.push(`/home/aesthetic/aesathedetail/${item.bgid}`);
                  }}
                >
                  {item.title}
                </li>
              );
            })}
        </ul>
      </div>
      <div className="second">
        <Mainrighttitle title="随机阅读"></Mainrighttitle>
        <ul>
          {blog.length &&
            blog.slice(blog.length - 12, blog.length).map((item, index) => {
              return (
                <li
                  className="item"
                  key={item.bgid}
                  onClick={(e) => {
                    history.push(`/home/aesthetic/aesathedetail/${item.bgid}`);
                  }}
                >
                  {item.title.slice(0, 10)}
                </li>
              );
            })}
        </ul>
      </div>
      <div className="second">
        <Mainrighttitle title="点击排行"></Mainrighttitle>
        <ul>
          {blog.length &&
            blog1
              .sort((a, b) => b.clickHit - a.clickHit)
              .slice(blog.length - 12, blog.length)
              .map((item, index) => {
                return (
                  <li
                    className="item"
                    key={item.bgid}
                    onClick={(e) => {
                      history.push(
                        `/home/aesthetic/aesathedetail/${item.bgid}`
                      );
                    }}
                  >
                    {item.title.slice(0, 10)}
                  </li>
                );
              })}
        </ul>
      </div>
    </Threemesswrap>
  );
});
